<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>正奥能源油库管理</title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			html,
			body,
			div,
			span,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			a,
			img,
			ul,
			ol,
			li {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 16px;
				font: inherit;
				vertical-align: baseline;
			}

			html,
			body {
				height: 100%;
			}

			/* .el-tabs {
				height: 100%;
			}
 */
			/* .el-input__inner {
				width: 500px;
			}
 */
			[v-cloak] {
				display: none;
			}

			.mt15 {
				margin-top: 15px;
			}

			.w100 {
				width: 100%;
			}

			.el-tabs__content {
				height: 100%;
			}

			.el-tab-pane {
				height: 100%;
			}

			.el-tabs__header {
				text-align: center;
				border: 1px solid #d9d9d9;
				width: 130px;
				height: 100%;
			}

			.el-tabs--left .el-tabs__item.is-left {
				border-bottom: 1px solid #d9d9d9;
				text-align: center;
			}

			.el-form {
				border: 1px solid #d9d9d9;
				padding: 25px 10px 0 10px;
			}

			#oilguntab {
				height: 450px;
			}
		</style>
	</head>
	<body>
		<div id="app" style="height: 95%;width: 98%;" v-cloak>
			<div style="width: 100%;padding: 10px;height: 100%;">
				<el-form :model="form" :rules="rules" ref="form">
					<el-row :gutter="10">
						<el-col :span="4">
							<el-form-item label="油站" :label-width="formLabelWidth" prop="stationNumber">
								<el-select v-model="form.stationNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in oilSelectList" :key="item.fueltankno"
										:label="item.energystationname" :value="item.energystationid"
										@click.native="handleChange(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="罐号" :label-width="formLabelWidth" prop="tankNumber">
								<el-select v-model="form.tankNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in SelectList" :key="item.fueltankno"
										:label="item.fueltankname" :value="item.fueltankno"
										@click.native="handleShowFlangChange(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row :gutter="10">
					<el-row>
						<el-col :span="4">
							<el-form-item label="库存量(L)" label-width="82px" prop="tankStock">
								<el-input v-model.trim="form.tankStock" placeholder="请输入内容" style="width: 96%;">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="油温" :label-width="formLabelWidth" prop="oilTemperature">
								<el-input v-model.trim="form.oilTemperature" placeholder="请输入内容"
									class="w100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="水高" :label-width="formLabelWidth" prop="waterHight">
								<el-input v-model.trim="form.waterHight" placeholder="请输入内容" class="w100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="是否下发" label-width="102px" prop="stationNumber">
								<el-select v-model="form.isSend" placeholder="请选择" class="w100">
									<el-option v-for="item in statusSelect" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="1.5" style="margin: 0 10px;">
							<el-button type="primary" @click='submitForm'>确 定</el-button>
						</el-col>
					</el-row>
				</el-form>
				<el-form style="border: 0px;">
					<el-row style="margin: 10px 0; font-size: 14px;">
						<el-col :span="4">
							<el-form-item label="油站" :label-width="formLabelWidth">
								<el-select v-model="selectForm.stationNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in oilSelectList" :key="item.fueltankno"
										:label="item.energystationname" :value="item.energystationid"
										@click.native="handleChange(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="油罐" :label-width="formLabelWidth">
								<el-select v-model="selectForm.tankNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in SelectList" :key="item.fueltankno"
										:label="item.fueltankname" :value="item.fueltankno"
										@click.native="handleShowFlangChange(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4" style="margin-left: 10px;">
							<el-button type="primary" @click='queryBtn'>查询</el-button>
							<el-button @click="resetBtn">重置</el-button>
							<el-button @click="resetBtn">刷新</el-button>
						</el-col>
					</el-row>
				</el-form>



				<div id="oilguntab">
					<el-table ref="tableData" v-loading="loading" :border=true :data="tableData" width='100%'
						height="100%" style="overflow: auto">
						<el-table-column type="index" width="50" align='center'>
						</el-table-column>
						<!-- <el-table-column label="油站编号" prop="stationNumber" align='center'></el-table-column> -->
						<el-table-column label="油站名称" prop="stationName" align='center'></el-table-column>
						<el-table-column label="油罐编号" prop="tankNumber" align='center'></el-table-column>
						<el-table-column label="油罐名称" prop="tankName" align='center'></el-table-column>
						<el-table-column label="卸油量" prop="tankStock" align='center'></el-table-column>
						<el-table-column label="油温" prop="oilTemperature" align='center'></el-table-column>
						<el-table-column label="水高" prop="waterHight" align='center'></el-table-column>
						<el-table-column label="操作时间" prop="operatorTime" align='center'></el-table-column>
						<el-table-column label="是否下发" prop="isSend" align='center'>
							<template slot-scope="scope">
								<el-button type="primary" size="small" v-if='scope.row.isSend == "0"'
									@click='issue(scope.row.id)'>下发
								</el-button>
								<!-- <span v-if='scope.row.isSend == "0"'>未下发</span> -->
								<span v-if='scope.row.isSend == "1"'>已下发</span>
							</template>
						</el-table-column>
					</el-table>
					<!--      分页-->
					<div class="mt15">
						<el-pagination background layout="prev, pager, next" :total="total"
							page-sizes="[10, 20, 30, 40]" :page-size="10" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" :current-page="currentPage">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/element.lib.js"></script>

		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						value1: '',
						stationid: 0,
						total: 0,
						totals: 0,
						currentPage: 0,
						tabPosition: 'left',
						tableData: [],
						tableDatas: [],
						loading: false,
						dialogFormVisible: false,
						dialogFormVisibles: false,
						formLabelWidth: '80px',
						oilSelectList: [],
						SelectList: [],
						pageSize: 10,
						pageNum: 1,
						pageSizes: 10,
						pageNums: 1,
						title: '液位仪 数据管控中心',
						form: {
							tankNumber: '',
							tankStock: '',
							oilTemperature: '',
							waterHight: '0',
							stationNumber: '',
							tankName: '',
							stationName: '',
							isSend: '0',
						},

						// 查询
						selectForm: {
							stationNumber: '',
							tankNumber: '',
						},

						// 状态下拉
						statusSelect: [{
								value: '0',
								label: '不下发'
							},
							{
								value: '1',
								label: '下发'
							}
						],
						rules: {
							stationNumber: [{
								required: true,
								message: '请选择油站',
								trigger: 'axis'
							}],
							tankNumber: [{
								required: true,
								message: '请选择罐号',
								trigger: 'axis'
							}],
							tankStock: [{
									required: true,
									message: '请输入库存量',
									trigger: 'axis'
								},
								{
									pattern: /^\d+(\.\d{0,1})?$/,
									message: '最多保留一位小数',
									trigger: 'blur'
								}
							],
							oilTemperature: [{
									required: true,
									message: '请输入油温',
									trigger: 'axis'
								},
								{
									pattern: /^\d+(\.\d{0,1})?$/,
									message: '最多保留一位小数',
									trigger: 'blur'
								}
							],
							waterHight: [{
									required: true,
									message: '请输入水高',
									trigger: 'axis'
								},
								{
									pattern: /^\d+(\.\d{0,1})?$/,
									message: '最多保留一位小数',
									trigger: 'blur'
								}
							],
						}
					}
				},
				created() {
					// 	
					// 	if(!token) {
					// 		window.location.href = './login/index.html'
					// 	}else {

					// 	}

					this.initToken()
					this.initBaseUrl()
					this.pageNum = 0
					this.tankSelectList()
					this.getOilselect()
				},
				mounted() {
					// this.getTableList()
				},
				methods: {
					// 初始化token 数据
					initToken() {
						const token = localStorage.getItem('token')
						console.log(axios.defaults)
						axios.defaults.headers.common['Authorization'] = token // 改写axios 源码，初始化的时候往里面写入token
					},
					//初始化接口前缀 便于修改
					initBaseUrl() {
						axios.defaults.baseURL = 'http://192.168.3.30:8799'
					},
					issue(id) {
						const url =
							`/ec/ecInventoryRecord/send/${id}`;
						axios.get(url)
							.then(response => {
								if (response.data.code == 200) {
									this.$message({
										message: '下发成功',
										type: 'success'
									});
									this.getTableList()
								}
								else if (response.data.code == 401) {
									this.$message({
										message: response.data.msg,
										type: 'error'
									});
								}
							})
							.catch(error => {

							});
					},
					handleSizeChange(val) {},
					handleCurrentChange(val) {
						this.pageNum = val - 1
						this.getTableList()
					},
					// 油罐下拉列表
					tankSelectList(stationid) {
						// 发起 GET 请求获取站点列表
						axios.get(`/ec/stationBaseInfo/queryFueltank/${stationid}`)
							.then(response => {
								this.SelectList = response.data;
							})
							.catch(error => {
								// 请求失败，处理错误
								console.error('Error fetching station list:', error);
							})
					},
					// 油站下拉列表
					getOilselect() {
						axios.get('/ec/stationBaseInfo/queryStationList')
							.then(response => {
								this.oilSelectList = response.data;
							})
							.catch(error => {
								// 请求失败，处理错误
								console.error('Error fetching station list:', error);
							})
					},
					// 提交按钮
					submitForm() {
						this.$refs.form.validate((valid) => {
							if (valid) {
								const url = '/ec/ecInventoryRecord/save';
								const formData = this.form;
								axios.post(url, formData)
									.then(response => {
										if (response.data.code == 200) {
											console.log(this.formData)
											this.$message({
												message: '新增成功',
												type: 'success'
											});
											this.getTableList()
											this.$refs.form.resetFields()
										}
										else if (response.data.code == 401) {
											this.$message({
												message: response.data.msg,
												type: 'error'
											});
										}
									})
									.catch(error => {
										this.$message.error('新增失败');
									});
							} else {
								return false;
							}
						});
					},
					handleShowFlangChange(item) {
						this.form.tankName = item.fueltankname
					},

					handleChange(item) {
						this.form.stationName = item.energystationname
						this.tankSelectList(item.energystationid)
					},
					// 获取表格数据
					getTableList() {
						let pageNum = this.pageNum
						let pageSize = this.pageSize
						const url =
							`/ec/ecInventoryRecord/queryBySelect?pageNum=${pageNum}&pageSize=${pageSize}`;
						const selectForm = this.selectForm;
						axios.get(url, {
								params: selectForm
							})
							.then(response => {
								if (response.data.code == 200) {
									this.tableData = response.data.page.content
									this.total = response.data.page.totalElements
								} else if (response.data.code == 401) {
									this.$message({
										message: response.data.msg,
										type: 'error'
									});
								}
							})
							.catch(error => {

							});
					},

					// 查询按钮\
					queryBtn() {
						if (this.selectForm.stationNumber !== '' || this.selectForm.tankNumber !== '') {
							this.getTableList()
						} else {
							this.$message({
								message: '请输入查询条件',
								type: 'warning'
							});
						}

					},

					//重置按钮
					resetBtn() {
						this.selectForm = {
								stationNumber: '',
								tankNumber: '',
							},
							this.pageNum = 0
						this.pageSize = 10
						this.SelectList = []
						this.getTableList()
					},
				}
			});
		</script>
	</body>
</html>